<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>权限列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/css/oksub.css">
	<link rel="stylesheet" href="/static/lib/layui/css/global.css">
	<script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
	<script type="text/javascript" src="/static/js/xeutils.js"></script>
</head>

<body class="ok-body-scroll">
	{% csrf_token %}
	{{ buttonPer }}
	<blockquote class="layui-elem-quote" style="margin: 15px 5px;">系统管理>后台设置>组织机构管理</blockquote>
	<div class="ok-body">
		<div class="layui-row">
			<div class="layui-col-md3">
				<div id="permissionTree"></div>
			</div>
			<div class="layui-col-md9">
				<table class="layui-hide" id="permissionTable" lay-filter="tableFilter"></table>
			</div>
		</div>
	</div>
	<!--js逻辑-->
	<script src="/static/lib/layui/layui.js"></script>
	<script type="text/html" id="typeTpl">
		{% verbatim %}
		{{#  if(d.status == 0){ }}
		<span class="layui-btn layui-btn-xs">启用</span>
		{{#  } else if(d.status == 1) { }}
		<span class="layui-btn layui-btn-danger layui-btn-xs">停用</span>
		{{#  } }}
		{% endverbatim %}
	</script>
	<script>
		layui.use(["element", "jquery", "table","form", "laydate", "tree", "okLayer", "okUtils"], function () {
			let table = layui.table;
			let laydate = layui.laydate;
			let form = layui.form;
			let tree = layui.tree;
			let okLayer = layui.okLayer;
			let okUtils = layui.okUtils;
			let $ = layui.jquery;
			okLoading.close();

			function initPermissionTree() {
				okUtils.ajax('/system/getDeptDataTree/', "get", null, true).done(function (response) {
					tree.render({
						elem: '#permissionTree',
						data: XEUtils.toArrayTree(response.data,{ id:'id',parentKey: 'parent', strict: true, children:'children' }),
						showCheckbox: false,
						id: 'demoId1',
						isJump: false,
						click: function (obj) {
							// 做点什么？
							var data = obj.data;
							initPermissionTable(data);
						}
					});
					let data = { id: 0 };
					initPermissionTable(data);
				}).fail(function (error) {
					console.log(error)
				});
			}

			function initPermissionTable(data) {
				var userTable = table.render({
					elem: '#permissionTable',
					url: '/system/getDeptData/' + data.id,
					height: 'full-120',
					limit: 20,
					page: true,
					toolbar: "#toolbarTpl",
					size: "sm",
					cols: [[
						{ field: "id", title: "ID", width: 70, sort: true, fixed: "left" },
						{ field: "key", title: "机构代码", width: 100 },
						{ field: "title", title: "机构名称", width: 200 },
						{ field: "owner", title: "负责人", width: 200 },
						{ field: "phone", title: "电话", width: 200 },
						{ field: "email", title: "email", width: 200 },
						{ field: "parent", title: "parent", hide: true },
						{ field: "sort", title: "排序", width: 100 },
						{ field: "create_datetime", title: "创建时间", width: 200 },
						{ field: "status", title: "启用/停用", align: "center", width: 100, templet: "#typeTpl", fixed: "right" },
						{ title: "操作", width: 180, templet: "#operationTpl", align: "center", fixed: "right" }
					]],
					done: function (res) {
						// 做点什么？？？？？？？？？
					}
				});
			}
			initPermissionTree();
			//监听头工具栏事件
			table.on('toolbar(tableFilter)', function (obj) {
				let checkStatus = table.checkStatus(obj.config.id)
					, data = checkStatus.data; //获取选中的数据
				switch (obj.event) {
					case 'add':
						add();
						break;
					case 'edit':
						edit();
						break;
				}
			});
			//
			table.on("tool(tableFilter)", function (obj) {
				let data = obj.data;
				switch (obj.event) {
					case "edit":
						edit(data);
						break;
					case "del":
						del(data);
						break;
				}
			});
			function add() {
				okLayer.open("添加机构", "{% url 'system:deptAddPage' %}", "60%", "75%", null, function () {
					table.reload('permissionTable');
					tree.reload('demoId1');
				})
			}
			function edit(data) {
				okLayer.open("编辑机构", "{% url 'system:deptEditPage' %}", "60%", "75%", function (layero, index) {
					let iframe = window['layui-layer-iframe' + index];
					iframe.child(data);
				}, function () {
					table.reload('permissionTable');
					tree.reload('demoId1');
				});
			}
			function del(data) {
				let askMsg = "删除？删除后不可恢复！！！"
				// data['csrfmiddlewaretoken']=$("[name='csrfmiddlewaretoken']").val();
				okLayer.confirm(askMsg, function () {
					okUtils.ajax("/system/delDeptData/" + data.id, "get", null, true).done(function (response) {
						okUtils.tableSuccessMsg(response.msg);
						initPermissionTree();
					}).fail(function (error) {
						// 这里已经有提示了
						console.log(error);
					});
				});
			}
		});
	</script>
	<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		{% for i in headPermisson %}
			{% if i == 'add' %}
			<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe608;</i>添加机构</button>
			{% endif %}
			{% empty %}
			<span>无权限</span>
		{% endfor %}
	</div>
</script>
	<!--行工具栏模板-->
<script type="text/html" id="operationTpl">
	{% for i in operaPermisson %}
		{% if i == 'edit' %}
        <a href="javascript:" title="编辑" lay-event="edit"><button class="layui-btn layui-btn-xs">修改</button></a>
		{% elif i == 'delete' %}
		<a href="javascript:" title="删除" lay-event="del"><button class="layui-btn layui-btn-danger layui-btn-xs">删除</button></a>
		{% endif %}
		{% empty %}
		<span>无权限</span>
	{% endfor %}
</script>



</body>

</html>